<template>
    <el-footer class="ba-footer" @touchstart="touchstart()">
        <div v-if="false">
            Copyright @ 2020~{{ new Date().getFullYear() }} {{ siteConfig.siteName }} {{ $t('Copyright') }}
            <a href="http://beian.miit.gov.cn/">{{ siteConfig.recordNumber }}</a>
        </div>
        <section class="zui-layout-section style_footer__pU528 !mb-0">
            <div class="footer-reserve">
                <div class="zui-layout zui-layout-column zui-layout-responsive ">
                <h2 class="style_header__odb9E">
                    {{siteConfig.footer_title}}<span class="prefix style_prefix__ZczOk">{{siteConfig.footer_describe}}</span>
                </h2>
                <div class="style_links__YWCev">
                    <nuxt-link target="_blank" href="https://console.super-aiagent.com/#/manystores/login?type=register">
                        <button type="button" class="zui-button zui-button-link zui-button-small">
                            注册并免费试用
                            <i role="img" aria-label="arrow" class="zui-icon" style="width: 1em; height: 1em">
                                <svg
                                    width="1em"
                                    height="1em"
                                    viewBox="0 0 16 16"
                                    version="1.1"
                                    xmlns="http://www.w3.org/2000/svg"
                                    xmlns:xlink="http://www.w3.org/1999/xlink"
                                >
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <g transform="translate(-705.000000, -5533.000000)" fill="currentColor"
                                           fill-rule="nonzero">
                                            <g transform="translate(639.000000, 5495.496000)">
                                                <g transform="translate(0.000000, 32.000000)">
                                                    <g transform="translate(66.000000, 5.504000)">
                                                        <path
                                                            d="M13.9834448,7.99501586 C13.9816267,7.90015326 13.9629353,7.80647023 13.9283232,7.71874158 C13.9150202,7.69162425 13.8983388,7.66646441 13.8787137,7.64391729 C13.8539641,7.58682079 13.82045,7.53432841 13.7794948,7.48851302 L10.1635151,3.7070088 C9.98923145,3.52502461 9.73520753,3.45395169 9.49713166,3.52056253 C9.25905579,3.58717336 9.07309737,3.78134819 9.00930514,4.02994323 C8.9455129,4.27853826 9.01357841,4.54378601 9.18786204,4.72577021 L11.6297508,7.27555159 L2.68902051,7.27555159 C2.30848499,7.27555159 2,7.59766672 2,7.99501586 C2,8.39236501 2.30848499,8.71448013 2.68902051,8.71448013 L11.6297508,8.71448013 L9.18786204,11.2642615 C8.99216143,11.4736531 8.93612684,11.7853278 9.04577512,12.054575 C9.1554234,12.3238222 9.4092759,12.4979001 9.68946898,12.496 C9.87320561,12.4938502 10.0490179,12.4175303 10.1800516,12.2830229 L13.7960313,8.50151871 C13.9276192,8.36900499 14.0013484,8.18590107 14,7.99501586 L13.9834448,7.99501586 Z"
                                                        ></path>
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </i>
                        </button>
                    </nuxt-link>
                </div>
                <div class="style_contact-wrap__ZcrXi" id="reserveform" >
                    <div class="style_contact-content__pCbSP">
                        <div class="style_title__xolGW">与我们联系</div>
                        <div class="style_desc__dMzqW">将有专人为您提供经营建议、解决方案、专业答疑等</div>
                        <div class="style_input-box__1BLEV">
                            <form class="style_input-content__edG3_">
                                <div class="style_mobile-content__P4UR5">
                                    <input
                                        type="tel"
                                        v-model="reserveForm.mobile"
                                        class="zui-input style_mobile-input__9hbb9 style_input__gWY_S zui-input-large"
                                        placeholder="请输入您的手机号"
                                    />
                                </div>
                            </form>
                            <button type="button" @click="reserveSub" style="background-color: #05108F;"
                                    class="zui-button zui-button-primary zui-button-large zui-button-block style_callback-btn__SUL11">
                                预约回电
                            </button>
                            <div class="style_extra__pDH9J">*阅读我们的
                                <a href="/examples/agreement" target="_blank">用户协议</a>
                                <span  style="color:#ffffff;">、</span>
                                <a href="/examples/statement" target="_blank">隐私声明</a>，
                                <a href="/examples/certification" target="_blank" class="style_detail__69Yrp" style="color:#ffffff;">了解更多详情</a>
                            </div>
                        </div>
                    </div>
                    <picture class="style_contact-img__1ZVzG" v-if="false">
                        <source type="image/webp" srcset="https://iph.href.lu/1034x709">
                        <source type="image/jpeg" srcset="https://iph.href.lu/1034x709">
                        <img loading="lazy" alt="陪你一起做好生意" src="https://iph.href.lu/1034x709">
                    </picture>
                </div>

                <div class="component-login zui-layout-responsive">
                    <p>{{siteConfig.footer_register}}</p>
                    <a class="clue-button" href="https://console.super-aiagent.com/#/manystores/login?type=register" rel="nofollow" target="_blank">
                        立即注册
                    </a>
                </div>
            </div>
            </div>
        </section>
        <footer class="zng-footer zng-footer-common">
            <nav class="zng-footer__menu zui-layout zui-layout-row zui-layout-responsive">
                <template  v-for="(footMenu,ink) in footNav" :key="ink">
                    <div class="zng-footer__menu-group" :class="footMenu.id==activeFootMenu?' zng-footer__menu-group--opened':''" >
                        <div class="zng-footer__menu-group__title" @click="showTwoFootMenu(footMenu)">
                            {{footMenu.title}}
                            <i role="img" aria-label="down" class="zui-icon zenticon zenticon-down" style="font-size: 24px;"></i>
                        </div>
                        <ul class="zng-footer__menu-list">
                            <li class="zng-footer__menu-item" v-for="(subMenu,inx) in footMenu.children" :key="inx">
                                <a target="_blank" :href="subMenu.path">
                                    <span class="zng-navigation__default-item-text">{{subMenu.title}}</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </template>
                <div class="zng-footer__menu-group" :class="99==activeFootMenu?' zng-footer__menu-group--opened':''" @click="showTwoFootMenu({'id':99,children:[{'id':99}]})">
                    <div class="zng-footer__menu-group__title">联系我们
                        <i role="img" aria-label="down"  class="zui-icon zenticon zenticon-down"  style="font-size: 24px;"></i>
                    </div>
                    <div class="zng-footer__menu-list">
                        <a class="zng-footer__menu-item" :href="'tel:'+siteConfig.telephone">电话咨询：{{siteConfig.telephone}}</a>
                        <a class="zng-footer__menu-item" :href="'tel:'+siteConfig.service_hotline">商家服务：{{siteConfig.service_hotline}}</a>
<!--                        <a class="zng-footer__menu-item"-->
<!--                        href="" target="_blank">消费保障：在线客服</a>-->
                        <a class="zng-footer__menu-item"  :href="'mailto: '+siteConfig.contact_email" target="_blank">投资者联系:{{siteConfig.contact_email}}</a>
                    </div>
                    <div></div>
                </div>
                <div class="zng-footer__menu-group" v-if="isMobileDevice===false">
                    <div class="zng-footer__menu-group__title">关注超算智能</div>
                    <div class="zng-footer__social"><p>关注公众号、视频号、官网手机版。了解更多资讯</p>
                        <div class="zng-footer__social__images">
                            <el-image  ref="imageRefa"
                                :src="siteConfig.offiaccount"
                                v-if="siteConfig.offiaccount"
                                :preview-src-list="[siteConfig.offiaccount]"
                            />
                            <el-image  ref="imageRefb"
                                :src="fullUrl(siteConfig.video_number_image)"
                                v-if="siteConfig.video_number_image"
                                :preview-src-list="[fullUrl(siteConfig.video_number_image)]"
                            />
                            <el-image  ref="imageRefc"
                                :src="fullUrl(siteConfig.mobile_qrcode)"
                                v-if="siteConfig.mobile_qrcode"
                                :preview-src-list="[fullUrl(siteConfig.mobile_qrcode)]"
                            />
                        </div>
                        <ul class="zng-footer__social__list" v-if="false">
                            <li data-item="视频号" class="zng-footer__social__item" @mouseover="hoverHandle('video',true)"
                                @mouseleave= "hoverHandle('video',false)" >视频号
                                <div class="zng-footer__social__popover " :class="(actionVal=='video'&&actionShow)?'':'hidden'">
                                    <div class="zng-footer__social__popover-container">
                                        <el-image
                                            :src="siteConfig.video_number_image"
                                            :preview-src-list="[siteConfig.video_number_image]"
                                        />
                                        <div class="zng-footer__social__popover-content">
                                            <div class="zng-footer__social__popover-content-title">
                                                扫码关注视频号
                                            </div>
                                            <p>与更多行业大咖对话</p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li data-item="商家群" class="zng-footer__social__item" @mouseover="hoverHandle('shangjia',true)"
                                @mouseleave= "hoverHandle('shangjia',false)" >商家群
                                <div class="zng-footer__social__popover " :class="(actionVal=='shangjia'&&actionShow)?'':'hidden'">
                                    <div class="zng-footer__social__popover-container"><img :src="siteConfig.business_group_image" alt="商家群">
                                        <div class="zng-footer__social__popover-content">
                                            <div class="zng-footer__social__popover-content-title">扫码加入行业交流群
                                            </div>
                                            <p>更多资源无缝对接</p></div>
                                    </div>
                                </div>
                            </li>
                            <li data-item="抖音号" class="zng-footer__social__item" @mouseover="hoverHandle('douyin',true)"
                                @mouseleave= "hoverHandle('douyin',false)" >抖音号
                                <div class="zng-footer__social__popover " :class="(actionVal=='douyin'&&actionShow)?'':'hidden'" >
                                    <div class="zng-footer__social__popover-container"><img
                                        :src="siteConfig.douyin_account_image"
                                        alt="抖音号">
                                        <div class="zng-footer__social__popover-content">
                                            <div class="zng-footer__social__popover-content-title">
                                                扫码关注微商城抖音号
                                            </div>
                                            <p>了解更多运营干货</p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <div class="zui-layout zui-layout-row zui-layout-responsive zng-footer__container" v-if="isMobileDevice===false">
                <div class="zng-footer__content-wrapper">
                    <div class="zng-footer__content">
                        <p class="zng-footer__copyright">
                            <img src="/assets/images/foot-logo1.png" alt="超算智能">
                            <a href="http://beian.miit.gov.cn/" target="_blank">{{siteConfig.recordNumber}}</a>
                        </p>
                    </div>
                </div>
            </div>
        </footer>
    </el-footer>
    <div v-if="isMobileDevice===false">
        <div class="clue-components-form-wrapper">
            <div class="clue-components-mask" style="display: none;"></div>
            <div class="clue-components-form-avatar" v-if="false" style="display: block;">
                <div class="clue-components-form-avatar__border" style="display: block;"></div>
                <img class="clue-components-form-avatar__img clue-components-form-avatar--breath" src="/assets/online_service.png">
                <div class="clue-components-form-avatar__text">
                    <span>在线咨询</span>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div class="clue-components-form-avatar-badge">1</div>
            </div>
            <ul class="clue-components-form-list">
                <li class="clue-components-form-list__item" data-title="微信咨询" value="微信咨询" @click="inforHandle('weixin')">
                    微信咨询
                </li>
                <li class="clue-components-form-list__item" data-title="电话咨询" value="电话咨询" @click="inforHandle('mobile')">
                    电话咨询
                </li>
                <li class="clue-components-form-list__item" data-title="视频号" value="视频号" @click="inforHandle('video')">
                    视频号
                </li>
            </ul>
            <!-- 点击时出现的卡片 -->
            <div class="clue-components-form-card" v-if="state.infor_type!=''">
                <div class="clue-components-form-card-content" data-title="微信咨询" v-if="state.infor_type=='weixin'">
                    <p class="clue-components-form-card-content__title">微信咨询</p>
                    <p class="clue-components-form-card-content__description">添加总经理，为您悉心解答</p>
                    <img class="clue-components-form-card-content__image" :src="fullUrl(siteConfig.contact_qrcode)" alt="二维码">
                    <span class="clue-components-form-card-content__loading"></span>
                    <p class="clue-components-form-card-content__extra">
                        手机扫码加我微信
                    </p>
                </div>
                <div class="clue-components-form-card-content" data-title="电话咨询" v-if="state.infor_type=='mobile'">
                    <div class="clue-components-form-appointment-callback">
                        <div class="clue-components-form-appointment-callback-content clue-components-form-appointment-callback-input-wrapper">
                            <div class="clue-components-form-appointment-callback-content-title">预约回电</div>
                            <p>总经理将尽快与您来电沟通</p>
                            <input type="tel"  v-model="reserveForm.mobile" placeholder="填写你的手机号码" maxlength="11">
                            <p class="clue-components-form-appointment-callback-error"></p>
                            <button @click="reserveSub" class="clue-components-form-appointment-callback-action">
                                立即预约
                            </button>
                        </div>
                        <div v-if="false" class="clue-components-form-appointment-callback-content clue-components-form-appointment-callback-success-wrapper">
                            <div class="clue-components-form-appointment-callback-content-title">预约成功</div>
                            <p>专家顾问将在10分钟内向您致电</p>
                            <p class="clue-components-form-appointment-callback-extra">非工作时间可能会延迟，敬请谅解</p>
                        </div>
                    </div>
                </div>
                <div class="clue-components-form-card-content" data-title="视频号" v-if="state.infor_type=='video'">
                    <p class="clue-components-form-card-content__title">视频号</p>
                    <p class="clue-components-form-card-content__description">持续分享更多AI科普知识</p>
                    <img class="clue-components-form-card-content__image" :src="fullUrl(siteConfig.video_number_image)" alt="二维码">
                    <span class="clue-components-form-card-content__loading"></span>
                    <p class="clue-components-form-card-content__extra">
                        手机扫码关注视频号
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div id="WAP_CLUE_INSTANCE" :class="state.mobShowMenu" v-else>
        <div class="clue-components-wap style_wrap__u4MK5 style_showing__WB3GS">
            <div class="w-full h-full flex py-2 pl-3 pr-2.5 box-border" style="justify-content: space-around;">
                <button type="button" class="reset-button style_action-button__hzUI9" @click="inforHandle('callback')"
                        style="background-image: url(https://img01.yzcdn.cn/upload_files/2024/08/14/FrOE3qnQQUZXOXwNVXDtBZpWFX8C.png);">
                    预约回电
                </button>
                <button type="button"  @click="inforHandle('qiyewechat')" class="reset-button style_action-button__hzUI9"
                                 style="background-image: url(https://img01.yzcdn.cn/upload_files/2024/08/14/FuGHY9cZrI0a-Oj1VhHT94Fr0Hwt.png);">
                    微信咨询
                </button>
            </div>
        </div>
        <div class="block fixed inset-0 z-[99] w-full bg-transparent data-clarity:relative" v-if="state.infor_type=='callback'">
            <div aria-hidden="true" class="absolute inset-0 bg-mask"></div>
            <div role="dialog"
                 class="absolute w-full box-border bottom-0 left-0 right-0 z-1 bg-white rounded-t-2xl overflow-hidden animate__faster min-h-[40vh] max-h-[80vh] bg-cover pt-4 px-3 animate__slideInUp"
                 style="background-image: url(/assets/mobyu_bg.png);">
                <i role="img" aria-label="close" @click="inforHandle('')"
                   class="zui-icon zenticon zenticon-close font-semibold text-gray-400 absolute top-5 right-5 text-2xl cursor-pointer"></i>
                <div class="relative my-12">
                    <div class="px-4 text-center">
                        <div class="text-heading text-xl font-medium mb-3">留下你的联系方式</div>
                        <p class="text-base text-normal text-nowrap">总经理将尽快与您来电沟通</p>
                        <div class="relative h-12 mt-4 mb-7 overflow-visible">
                            <input type="tel" placeholder="请输入手机号码"
                                                     maxlength="11"
                                                     v-model="reserveForm.mobile"
                                                     class="block w-full box-border outline-none rounded border border-solid border-[#DCDEE0] text-sm px-4 h-12"
                                                     autocomplete="tel-local" />
                        </div>
                        <button type="button" @click="reserveSub" :disabled="reserveForm.mobile==''?true:false"
                                class="reset-button bg-primary text-white rounded text-lg font-medium flex h-11 w-full items-center justify-center " :class="reserveForm.mobile==''?'disabled:opacity-50':''">
                            预约回电
                        </button>
                        <div v-if="false" class="flex items-center text-xs mt-4"><input id="check-rule-form" type="checkbox"
                                                                           class="Consult_checkbox__i74Of checked"
                                                                           checked=""><label for="check-rule-form">我已阅读并同意<a
                            href="https://www.youzan.com/intro/rule/detail?alias=132atyi19&amp;pageType=rules"
                            target="_blank">《隐私政策》</a>和<a
                            href="https://www.youzan.com/intro/rule/detail?alias=4f234e2f&amp;pageType=rules"
                            target="_blank" class="ml-1">《用户协议》</a></label></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="block fixed inset-0 z-[99] w-full bg-transparent data-clarity:relative" v-if="state.infor_type=='qiyewechat'">
            <div aria-hidden="true" class="absolute inset-0 bg-mask"></div>
            <div role="dialog"
                 class="absolute w-full box-border bottom-0 left-0 right-0 z-1 bg-white rounded-t-2xl overflow-hidden animate__faster min-h-[40vh] max-h-[80vh] bg-cover pt-4 px-3 animate__slideInUp"
                 style="background-image: url(/assets/mobyu_bg.png);">
                <i role="img" aria-label="close" @click="inforHandle('')"
                   class="zui-icon zenticon zenticon-close font-semibold text-gray-400 absolute top-5 right-5 text-2xl cursor-pointer"></i>
                <div class="relative my-12">
                    <div class="px-4 text-center">
                        <div class="text-heading text-xl font-medium mb-3">微信咨询</div>
                        <p class="text-base text-normal text-nowrap">添加总经理，为您悉心解答</p>
                        <img class="clue-components-form-card-content__image" :src="fullUrl(siteConfig.contact_qrcode)" alt="二维码">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import {isMobile} from '~/utils/common'
import {ElMessage, ElMessageBox} from 'element-plus'
import type {Action} from 'element-plus'
import {reactive} from 'vue'
const siteConfig = useSiteConfig()
const reserveForm = reactive({
    mobile: ''
})
const imageRefc = ref<ImageInstance>()
const handleClick=(e:any)=> {
    imageRefc.value!.showPreview()
}
const footNav=siteConfig.footNav
const isMobileDevice = ref(isMobile())
const reserveSub = async () => {
    await Http.$fetch({
        url: 'api/index/reserve',
        method: 'post',
        body: reserveForm,
    }).then(res => {
        if (res.code == 1) {
            ElMessageBox.alert(res.msg, '提示', {
                // if you want to disable its autofocus
                // autofocus: false,
                confirmButtonText: '确定',
                callback: (action: Action) => {
                    window.location.reload()
                    // ElMessage({
                    //     type: 'info',
                    //     message: `action: ${action}`,
                    // })
                },
            })
        }
    })

}
const activeFootMenu=ref(0)
const showTwoFootMenu=(menuVal:any)=>{
    if(menuVal.children.length==0){
        window.location.href=menuVal.path
        return false
    }
    if(menuVal.id==activeFootMenu.value){
        activeFootMenu.value=0
    }else{
        activeFootMenu.value=menuVal.id
    }
}
const actionVal=ref('')
const actionShow=ref(false)
const hoverHandle=(action:any,showVal:any)=>{
    actionShow.value=showVal
    actionVal.value=action
}
const state=reactive({
    infor_type:'',
    mobShowMenu:'mobShowMenu'
})
const inforHandle=(type:any)=>{

    state.infor_type=state.infor_type==type?'':type;
}

const scrollTop = ref(0);

const handleScroll = () => {
    if(window.scrollY<=scrollTop.value){
        state.mobShowMenu='mobShowMenu'
    }
    setTimeout(function (){
        state.mobShowMenu=''
    },2000)
    scrollTop.value = window.scrollY || document.documentElement.scrollTop;
};

onMounted(() => {
    window.addEventListener("scroll", handleScroll);
});

onUnmounted(() => {
    window.removeEventListener("scroll", handleScroll);
});

</script>
<style scoped lang="scss">
.mobShowMenu{
    display: none;
}
.el-footer {
    padding: 0;
}
.zng-footer__menu-item{
    width: auto;
}
.component-pagination__wrapper {
    overflow: hidden
}

.component-pagination__list {
    margin: 16px auto;
    color: #323233;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.component-pagination__item, .component-pagination__item_next, .component-pagination__item_pre {
    margin-left: 4px;
    display: inline-block;
    color: #323233;
    border: 1px solid transparent;
    border-radius: 2px
}

.component-pagination__item_next a, .component-pagination__item_pre a, .component-pagination__item a {
    color: inherit;
    display: block;
    padding: 0 6px;
    min-width: 32px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 32px;
    text-align: center;
    height: 32px
}

.component-pagination__item:hover, .component-pagination__item_next:hover, .component-pagination__item_pre:hover {
    border-color: #155bd4
}

.component-pagination__item:hover a, .component-pagination__item_next:hover a, .component-pagination__item_pre:hover a {
    color: #155bd4
}

.component-pagination__item_next:hover, .component-pagination__item_pre:hover {
    border: 1px solid transparent
}

.component-pagination__item_next a, .component-pagination__item_pre a {
    background: url(https://img01.yzcdn.cn/upload_files/2022/02/16/FgTjgLxT-JDTxiLwKBHQDpGM_2u5.png) no-repeat;
    background-size: contain
}

.component-pagination__item_next.disabled a, .component-pagination__item_pre.disabled a {
    background-image: url(https://img01.yzcdn.cn/upload_files/2022/02/16/FoNQ4l22sSwTha-65_-yJ6y0J1NT.png)
}

.component-pagination__item_next a {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.active.component-pagination__item_next, .active.component-pagination__item_pre, .component-pagination__item.active {
    border-color: #155bd4;
    background-color: #155bd4;
    color: #fff
}

.active.component-pagination__item_next a:hover, .active.component-pagination__item_pre a:hover, .component-pagination__item.active a:hover {
    color: #fff
}

.component-pagination__item.disabled, .disabled.component-pagination__item_next, .disabled.component-pagination__item_pre {
    color: #ebedf0
}

.component-pagination__item.disabled a:hover, .disabled.component-pagination__item_next a:hover, .disabled.component-pagination__item_pre a:hover {
    color: #ebedf0;
    cursor: not-allowed
}

.component-pagination__item_current {
    text-align: center;
    font-size: 14px;
    color: #323233;
    line-height: 24px;
    display: none
}

@media only screen and (max-width: 769px) {
    .component-pagination__list {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        margin: 24px;
        padding: 2px 15px;
        border-radius: 20px;
        border: 1px solid #dadce0;
        background-color: #fff;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .component-pagination__item_num {
        display: none
    }

    .component-pagination__item_current {
        display: inline-block
    }
}

.component-login {
    width: 100%;
    text-align: center;
    background: linear-gradient(90deg, #5067c8, #2642bc);
    border-radius: 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 80px;    margin-top: 50px;
}

.component-login p {
    color: #fff;
    text-align: center;
    margin-bottom: 0;
    font-size: 24px;
    font-weight: 600;
}

.component-login a {
    font-size: 16px;
    color: #155bd4;
    border-radius: 2px;
    background: #fff;
    padding: 10px 0;
    border-radius: 50px;
    width: 180px;
}

@media only screen and (min-width: 769px) {
    .zng-footer__menu-group__title {
        .zui-icon {
            display: none;
        }
    }

}

@media only screen and (max-width: 769px) {
    .zng-footer__menu-group__title {
        .zui-icon {
            display: inline-block;
        }
    }
    .component-login p {
        font-size: 14px;
    }
    .footer-reserve{
        background: none;
        padding: 1rem 0;
    }
    .zng-footer{
        padding-bottom: 8rem;
    }
    .zui-layout-section{
        margin-bottom: -22px !important;
    }
}


.clue-components-form-wrapper {
    position: fixed;
    bottom: 128px;
    right: 22px;
    z-index: 1502;
    .clue-components-form-avatar {
        display: none;
        cursor: pointer;
        position: relative;
        margin-bottom: 12px;
    }
}
.clue-components-mask {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: none;
}
.clue-components-form-list, .clue-components-popup-list {
    list-style: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0;
    padding: 0;
}
.clue-components-form-list {
     width: 64px;
     padding: 10px 0 12px;
     background: #fff;
     border-radius: 32px;
     position: relative;
     -webkit-box-shadow: rgba(50, 50, 51, .16) 0 2px 8px;
     box-shadow: rgba(50, 50, 51, .16) 0 2px 8px;
 }
.clue-components-form-wrapper, .clue-components-form-wrapper * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.clue-components-form-list__item {
    background-repeat: no-repeat;
    background-position: center 10px;
    background-size: 20px 20px;
    padding: 36px 0 8px;
    width: 100%;
    background-color: transparent;
    text-align: center;
    margin: 0 auto;
    font-size: 12px;
    line-height: 18px;
    height: auto;
    color: #323233;
    border-radius: 0;
    position: relative;
    cursor: pointer;
    white-space: nowrap;
}
.clue-components-form-list__item:not(:last-child)::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 8px;
    right: 8px;
    height: 1px;
    background-color: #e3e3e3;
}
.clue-components-form-list__item:hover, .clue-components-form-list__item--active {
    color: #3370ff;
}
.clue-components-form-list__item:nth-child(1) {
    background-image: url(https://img01.yzcdn.cn/upload_files/2023/03/16/FpJlH2dcFkMHD50yta5IU3Jtkq6i.png);
}
.clue-components-form-list__item:hover:nth-child(1), .clue-components-form-list__item--active:nth-child(1) {
    background-image: url(https://img01.yzcdn.cn/upload_files/2023/03/16/FsOCkxNaOLbZ7lcI1y4nCB4_bZxM.png);
}

.clue-components-form-list__item:nth-child(2) {
    background-image: url(https://img01.yzcdn.cn/upload_files/2023/03/16/Fhu_4D1zsl9sd4v-e5vD32qNGJVb.png);
}
.clue-components-form-list__item:hover:nth-child(2), .clue-components-form-list__item--active:nth-child(2) {
    background-image: url(https://img01.yzcdn.cn/upload_files/2023/03/16/FpJGzn5_OfA07mGkFupRjUquEXNc.png);
}

.clue-components-form-list__item:hover:nth-child(3), .clue-components-form-list__item--active:nth-child(3) {
    background-image: url(https://img01.yzcdn.cn/upload_files/2023/03/16/FouiERsU0-r-apQWs0ePbTu4t4bU.png);
}
.clue-components-form-list__item:nth-child(3) {
    background-image: url(https://img01.yzcdn.cn/upload_files/2023/03/16/Fl0po2C3VkcD9wVEH85z_zJwqBIX.png);
}

.clue-components-form-wrapper .clue-components-form-avatar {
    display: none;
    cursor: pointer;
    position: relative;
    margin-bottom: 12px;
}
.clue-components-form-wrapper .clue-components-form-avatar__border {
    display: none;
    position: absolute;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    background-size: 100% 100%;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    transform-origin: center;
    -webkit-animation: bg_ani 2s 1.2s infinitelinear;
    -moz-animation: bg_ani 2s 1.2s infinite linear;
    animation: bg_ani 2s 1.2s infinitelinear;
}
.clue-components-form-wrapper .clue-components-form-avatar__img {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 1px solid #3370ff;
}
.clue-components-form-wrapper .clue-components-form-avatar__text {
    min-width: inherit;
    font-size: 12px;
    width: 64px;
    height: 26px;
    border-radius: 2px;
    line-height: 26px;
    color: #3370ff;
    background: #fff;
    -webkit-box-shadow: 0 2px 8px rgba(50, 50, 51, .16);
    box-shadow: 0 2px 8px rgba(50, 50, 51, .16);
    position: relative;
    text-align: center;
    margin-top: -12px;
}
.clue-components-form-wrapper .clue-components-form-avatar-badge {
    position: absolute;
    border: 1px solid #fff;
    top: 0;
    right: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 3px;
    min-width: 16px;
    display: inline-block;
    height: 16px;
    background: #df3320;
    border-radius: 8px;
    line-height: 16px;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
}
.clue-components-form-wrapper .clue-components-form-avatar>* {
    pointer-events: none;
}

.clue-components-form-wrapper .clue-components-form-avatar::after {
    content: "";
    display: block;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-animation: bg_ani 2s .6s infinitelinear;
    -moz-animation: bg_ani 2s .6s infinite linear;
    animation: bg_ani 2s .6s infinitelinear;
}
.clue-components-form-card {
    position: absolute;
    top: 40%;
    right: 85px;
    background-color: #fff;
    background-size: 100% 100%;
    -webkit-box-shadow: 0 2px 8px 0 rgba(50, 50, 51, .1);
    box-shadow: 0 2px 8px 0 rgba(50, 50, 51, .1);
    border-radius: 16px;
    -webkit-transform: translateY(-40%);
    -moz-transform: translateY(-40%);
    transform: translateY(-40%);
}
.clue-components-form-card-content:nth-child(2) {
    color: #323233;
}
.clue-components-form-card-content:nth-child(2) {
    position: relative;
}
.clue-components-form-wrapper, .clue-components-form-wrapper * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.clue-components-form-card-content {
    width: 293px;
    min-height: 369px;
    background-size: 100% 100%;
    background-color: #fff;
    padding: 36px 20px;
    border-radius: 16px;
}
.clue-components-form-card-content__title, .clue-components-form-card-content__number {
    font-size: 22px;
    line-height: 26px;
    color: #323233;
    font-weight: 500;
    margin: 0;
}.clue-components-form-card p {
     margin: 0;
 }
.clue-components-form-wrapper, .clue-components-form-wrapper * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.clue-components-form-card-content__description {
    position: relative;
    white-space: nowrap;
}
.clue-components-form-card-content__description, .clue-components-form-card-content__extra {
    font-size: 14px;
    line-height: 16px;
    color: #323233;
}
.clue-components-form-card-content__number, .clue-components-form-card-content__description, .clue-components-form-card-content__extra {
    text-align: center;
}.clue-components-form-card-content__image {
     display: block;
     width: 180px;
     margin: 24px auto 0;
 }
img {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
    border-style: none;
}.clue-components-form-card-content p.clue-components-form-card-content__extra {
     margin-top: 8px;
 }
.clue-components-form-card p {
    margin: 0;
}
.clue-components-form-wrapper, .clue-components-form-wrapper * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.clue-components-form-card-content__extra {
    margin-top: 8px;
}
.clue-components-form-card-content__description, .clue-components-form-card-content__extra {
    font-size: 14px;
    line-height: 16px;
    color: #323233;
}.clue-components-form-card-content p.clue-components-form-card-content__title {
     margin-bottom: 4px;
 }
.clue-components-form-card p {
    margin: 0;
}
.clue-components-form-wrapper, .clue-components-form-wrapper * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.clue-components-form-card-content__title {
    text-align: center;
}
.clue-components-form-card-content__title, .clue-components-form-card-content__number {
    font-size: 22px;
    line-height: 26px;
    color: #323233;
    font-weight: 500;
    margin: 0;
}
.clue-components-form-appointment-callback-content input {
    outline: none;
    border: 1px solid #dcdee0;
    border-radius: 4px;
    font-size: 14px;
    line-height: 42px;
    padding: 0 8px;
    height: 42px;
    display: block;
    width: 100%;
    margin: 24px 0 0;
}
.clue-components-form-appointment-callback-content-title {
    font-size: 22px;
    font-weight: 500;
    line-height: 26px;
    color: #323233;
    margin-bottom: 4px;
    text-align: center;
}.clue-components-form-appointment-callback-content p {
     font-size: 14px;
     color: #323233;
     line-height: 20px;
     margin-bottom: 4px;
     text-align: center;
 }
.clue-components-form-appointment-callback-action {
    outline: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 42px;
    height: 42px;
    width: 100%;
    color: #fff;
    text-align: center;
    cursor: pointer;
    display: block;
    border-radius: 4px;
    background-color: #3370ff;
    border: solid 1px #3370ff;
}
.clue-components-form-appointment-callback p.clue-components-form-appointment-callback-error {
    height: 12px;
    font-size: 12px;
    color: #d40000;
    line-height: 12px;
    margin: 0;
    text-align: left;
    margin: 2px 0;
}
.clue-components-form-appointment-callback-content p {
    font-size: 14px;
    color: #323233;
    line-height: 20px;
    margin-bottom: 4px;
    text-align: center;
}.style_wrap__u4MK5 {
     position: fixed;
     left: 24px;
     right: 24px;
     bottom: 0;
     z-index: 98;
     border-radius: 9999px;
     background-color: hsla(0,0%,100%,.45);
     --tw-translate-y: -100%;
     transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
     transition-property: all;
     transition-duration: .2s;
     transition-timing-function: cubic-bezier(.4,0,.2,1);
     box-shadow: 0 5px 9px 0 rgba(0,0,0,.1)
 }

.style_wrap__u4MK5.style_showing__WB3GS {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    transform: translateY(calc(-1 * (26px + constant(safe-area-inset-bottom))));
    transform: translateY(calc(-1 * (26px + env(safe-area-inset-bottom))))
}

.style_wrap__u4MK5.style_hidding__RmBp4 {
    transform: translateY(100%)
}

.style_wrap__u4MK5:after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transform-origin: top left;
    --tw-scale-x: .5;
    --tw-scale-y: .5;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-radius: 9999px;
    border: 1px solid #fff;
    --tw-content: "";
    content: var(--tw-content);
    width: 200%;
    height: 200%
}

.style_bottom-button__dWP9F {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    background: linear-gradient(90deg,#0658ff,#0399ff)
}

.style_action-button__hzUI9 {
    background-position: top;
    background-repeat: no-repeat;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 24px;
    font-size: 12px;
    line-height: 16px;
    line-height: 1.5;
    color: #000;
    position: relative;
    background-size: 24px 24px;
    background-color: transparent!important;
    outline: none!important;
    border: none!important;
    flex:1;
}

.style_action-button__hzUI9:not(:last-child):after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin-top: auto;
    margin-bottom: auto;
    height: 16px;
    width: 1px;
    background-color: rgba(0,0,0,.2);
    --tw-content: "";
    content: var(--tw-content)
}

.nav-opened .style_wrap__u4MK5 {
    display: none
}

.Consult_success-icon__lOQW1 {
    margin: 32px auto;
    display: block;
    width: 56px;
    height: 56px;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    background-image: url("")
}

.Consult_checkbox__i74Of {
    border: 1px solid #5694fd;
    background: #fff;
    margin-right: 4px
}

.Consult_checkbox__i74Of.Consult_checked__C_KHK {
    background: linear-gradient(180deg,#5694fd,#215bfe);
    border-width: 0
}

.Consult_checkbox__i74Of:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%,-60%) rotate(30deg);
    width: 4px;
    height: 6px;
    border-bottom: 1.5px solid #fff;
    border-right: 1.5px solid #fff
}

.variables_yz-web-theme__EhDwq {
    --yz-web-theme: 1
}

/*# sourceMappingURL=0a75da9266927d4a.css.map*/

</style>

